<template>
	<view>
		<view class="pagenation">
			<view class="pagenation_title">
				订单
			</view>
		</view>

		<view class="tabs">
			<view class="tab" v-for="(item,index) in tabs" :key="index" :class="orderStatus === item.status?'active':''"
				@click="setTab(item.status)">
				{{item.name}}
				<view class="tab_line"></view>
			</view>
		</view>

		<view class="order_list">
			<view class="order_item" v-for="(item,index) in orderList" :key="index">
				<view class="order_item_hd" @tap="toOrderDetail(item)">
					<!-- <view class="order_store_img">
						<image :src="item.storePic" mode="aspectFill"></image>
					</view> -->
					<view class="order_store_info">
						<view class="order_store_name">
							订单编号：
							<view>{{item.orderNumber}}</view>
						</view>
						<view class="order_store_name">
							金额：{{item.amount}}
						</view>
						<view class="order_store_name" v-if="item.business">
							取餐地址：{{item.business.address}}
						</view>
						<view v-if="item.address" class="order_store_name">
							配送信息：
							<view style="padding-left: 20px;">
								用户：{{item.address.userName}}
							</view> 
							<view style="padding-left: 20px;">
								电话：{{item.address.userPhone}}
							</view> 
							<view style="padding-left: 20px;">
								地址：{{item.address.userAddress}}
							</view> 
						</view>
						<view class="order_time">
							创建时间：{{item.createTime}}
						</view>
					</view>
					<view class="order_orderStatus">
						{{item.status == 2?'待支付':item.status == 22?'已支付':item.status == 3?'商家已接单'
						:item.status == 4?'商家已出餐':item.status == 5?'校外骑手接单':item.status == 6?'校外骑手取餐'
						:item.status == 7?'校外骑手送餐':item.status == 8?'校外骑手送达':item.status == 9?'校内骑手接单'
						:item.status == 10?'校内骑手取餐':item.status == 11?'校内骑手送餐':item.status == 12?'校内骑手送达'
						:item.status == 13?'待评价':item.status == 14?'已评价':item.status == 15?'已取消':item.status == 17?'已退款':''
						}}
					</view>
				</view>
				<view class="order_item_bt">
					<!-- <view class="order_item_cancel" > -->
						
						<view class="button" v-if="item.status == 1 || item.status == 2"
						@tap="cancelOrderFn(item)">
							取消订单
						</view>
					<view class="button" v-if="item.status == 22"
						@tap="cancelOrderFn2(item)">
						取消并退款
					</view>
					<view class="button" v-if="item.status == 2" @click="gotoPay(item)">
						进行支付
					</view>
					<view class="button" v-if="item.status == 12" @click="gotoConfirm(item)">
						确认收货
					</view>
					<view class="button" @tap="toEvaluate(item)" v-if="item.status == 13">
						晒单评价
					</view>
				</view>
			</view>

		</view>
		<uni-load-more :status="loadStatus"></uni-load-more>

		<view class="mask" v-if="cancelFlag == true">

		</view>
		<view class="cancel_mask" v-if="cancelFlag == true">
			<view class="delete_title">
				确定要取消该订单吗？
			</view>
			<view class="delete_btns">
				<view class="delete_cancel" @tap="cancelDelete()">
					取消
				</view>
				<view class="delete_sure" @tap="sureDelete()">
					确定
				</view>
			</view>
		</view>
		
		<view class="mask" v-if="cancelFlag2 == true">
		
		</view>
		<view class="cancel_mask" v-if="cancelFlag2 == true">
			<view class="delete_title">
				确定要取消该订单吗？
			</view>
			<view class="delete_btns">
				<view class="delete_cancel" @tap="cancelDelete2()">
					取消
				</view>
				<view class="delete_sure" @tap="sureDelete2()">
					确定
				</view>
			</view>
		</view>

		<tabBar current="2" v-show="cancelFlag != true || cancelFlag2 !=true"></tabBar>
	</view>
</template>

<script>
	import {
		getOrder,
		pay,
		confirmComplate,
		cancelOrder,
		cancelOrder2
	} from '../../api/api.js'
	export default {
		data() {
			return {
				deleteItem:'',
				orderStatus: '',
				loadStatus: 'nomore',
				query: {
					pageNum: 1,
					pageSize: 10,
					status: ''
				},
				tabs: [{
						name: '全部',
						status: ''
					},
					{
						name: '配送中',
						status: '1'
					},
					{
						name: '已确认',
						status: '2'
					}, {
						name: '未支付',
						status: '3'
					},

				],
				orderList: [],
				cancelFlag: false,
				clicked: false,
				cancelFlag2: false
			};
		},
		onPullDownRefresh() {
			this.query.pageNum = 1
			this.getList()
		},
		//上拉加载更多
		onReachBottom() {
			if (this.query.pageNum < this.pageCount) {
				this.query.pageNum++
				this.getList()
			}
		},
		methods: {
			gotoPay(item) {
				if (this.clicked) {
					return
				}
				this.clicked = true
				uni.showLoading()
				pay({
					orderNumber: item.orderNumber
				}).then(ddff => {
					let timeStamp = ddff.data.timeStamp
					let paySign = ddff.data.paySign
					let prepayId = ddff.data.prepayId
					let nonceStr = ddff.data.nonceStr
					let that = this
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: timeStamp,
						nonceStr: nonceStr,
						package: 'prepay_id=' + prepayId,
						signType: 'RSA',
						paySign: paySign,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							uni.hideLoading()
							that.clicked = false

							uni.navigateTo({
								url: "pages/index/index"
							})
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
							that.clicked = false
							uni.hideLoading()
						}
					});
				})
			},
			gotoConfirm(item) {
				confirmComplate({
					orderId: item.id
				}).then(res => {
					uni.showToast({
						title: "操作成功",
						icon: 'none',
						duration: 2000
					})
					this.getList()
				})
			},
			setTab(status) {
				this.orderStatus = status
				this.query.pageNum = 1
				this.getList()
			},
			
			
			cancelDelete2() {
				this.cancelFlag2 = false;
			},
			
			sureDelete2() {
				this.cancelFlag2 = false;
				cancelOrder2({orderId: this.deleteItem.id}).then(res => {
					uni.showToast({
						title: "取消成功",
						icon: 'none',
						duration: 2000
					})
					this.getList()
				})
				
			},
			cancelOrderFn2(item) {
				this.cancelFlag2 = true;
				this.deleteItem = item
			},
			
			
			
			cancelDelete() {
				this.cancelFlag = false;
			},

			sureDelete() {
				this.cancelFlag = false;
				cancelOrder({orderId: this.deleteItem.id}).then(res => {
					uni.showToast({
						title: "取消成功",
						icon: 'none',
						duration: 2000
					})
					this.getList()
				})
				
			},
			cancelOrderFn(item) {
				this.cancelFlag = true;
				this.deleteItem = item
			},

			toOrderDetail(item) {
				uni.navigateTo({
					url: '/pages/order/detail?id=' + item.orderNumber + '&status=' + this.orderStatus + '&idd=' +
						item.id
				})
			},
			toEvaluate(item) {
				uni.navigateTo({
					url: '/pages/order/evaluate?id=' + item.id + '&orderNumber=' + item.orderNumber
				})
			},
			getList() {
				this.query.status = this.orderStatus;
				getOrder(this.query).then(res => {
					if (res.code == 200) {
						this.dataHandle(res)
					}
				})
			},
			dataHandle(res) {
				if (this.query.pageNum == 1) {
					this.orderList = []
				}
				this.orderList.push(...res.rows)
				this.pageCount = Math.ceil(res.total / 10)
				if (this.query.pageNum >= this.pageCount) {
					this.loadStatus = 'nomore'
				} else {
					this.loadStatus = 'more'
				}
				uni.stopPullDownRefresh()
			},
		},
		onShow() {
			console.log(1)
			this.getList()
		}
	}
</script>

<style lang="scss">
	.button {
		width: 156rpx;
		height: 56rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 24rpx;
		background: linear-gradient(180deg, rgba(255, 141, 26, 1) 12.5%, rgba(255, 195, 0, 1) 100%);
		border-radius: 8rpx;
		color: #FFFFFF;
		font-size: 26rpx;
	}
	page {
		background-color: #F9FBFC;
	}

	.pagenation {
		padding: 60rpx 24rpx 0;

		.pagenation_title {
			text-align: center;
			font-size: 36rpx;
			color: #333;
			font-weight: bolder;
		}
	}

	.tabs {
		padding: 0 24rpx;
		display: flex;
		justify-content: space-between;
		padding-top: 40rpx;

		.tab {
			position: relative;
			color: #666666;
			font-size: 28rpx;
			padding-bottom: 16rpx;

			&.active {

				color: rgba(255, 141, 26, 1);
				font-weight: bolder;

				.tab_line {
					display: block;
				}
			}

			.tab_line {
				display: none;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 4rpx;
				background-color: rgba(255, 141, 26, 1);
			}
		}
	}

	.order_list {
		margin-top: 30rpx;
		padding: 0 24rpx;
		padding-bottom: 180rpx;

		.order_item {
			background-color: #fff;
			padding: 0 24rpx;
			margin-bottom: 30rpx;

			.order_item_hd {
				position: relative;
				padding: 32rpx 0;
				display: flex;
				align-items: center;

				.order_store_img {
					width: 100rpx;
					height: 100rpx;
					flex-shrink: 0;

					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 8rpx;
					}
				}

				.order_store_info {
					margin-left: 15rpx;

					.order_store_name {
						font-size: 30rpx;
						font-weight: bolder;
						color: #2E343A;
					}

					.order_time {
						margin-top: 6rpx;
						color: #9098A0;
						font-size: 24rpx;
					}
				}

				.order_orderStatus {
					position: absolute;
					right: 0;
					font-size: 28rpx;
					color: #666666;
				}
			}

			.order_item_bd {
				position: relative;

				.order_goods {
					display: flex;

					.order_good {
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-right: 10rpx;

						.order_good_img {
							width: 170rpx;
							height: 116rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 8rpx;
							}
						}

						.order_good_name {
							color: #666666;
							font-size: 20rpx;
						}
					}
				}

				.order_other {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-80%);
					display: flex;
					flex-direction: column;
					align-items: center;

					.order_price {
						font-size: 32rpx;
						color: #000000;
						font-weight: 500;
					}

					.order_number {
						font-size: 24rpx;
						color: #666666;
					}
				}
			}

			.order_item_bt {
				padding: 32rpx 0;
				display: flex;
				justify-content: flex-end;

				.order_item_cancel {
					width: 156rpx;
					height: 56rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1rpx solid #D8D8D8;
					font-size: 26rpx;
					color: #2E343A;
					border-radius: 5rpx;
				}

				.order_item_pay {
					width: 156rpx;
					height: 56rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #2588FF;
					font-size: 26rpx;
					color: #fff;
					border-radius: 5rpx;
					margin-left: 20rpx;
				}
			}
		}
	}

	.mask {
		position: fixed;
		z-index: 5;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.cancel_mask {
		position: fixed;
		z-index: 5;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 610rpx;
		height: 300rpx;
		background-color: #fff;
		padding-top: 80rpx;
		border-radius: 12rpx;

		.delete_title {
			text-align: center;
			color: #2E343A;
			font-size: 32rpx;
			font-weight: 500;
		}

		.delete_btns {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 96rpx;
			border-top: 1rpx solid #ccc;
			display: flex;

			.delete_cancel {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50%;
				height: 96rpx;
				color: #2E343A;
				border-right: 1rpx solid #ccc;
			}

			.delete_sure {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50%;
				height: 96rpx;
				color: #2588FF;
			}
		}
	}
</style>
